<!DOCTYPE html>
<html lang="zh">

<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
  <meta content="yes" name="apple-mobile-web-app-capable" />
  <meta content="telephone=no" name="format-detection" />

  <title>编辑菜单_苏州同济医院_在线订餐</title>
  <script src="js/jquery.min.js"></script>
  <script src="js/vue@2.6.11.js"></script>
  <script src="js/vant.min.js"></script>
  <script src="js/rem.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.8/lib/index.css" />
  <link href="css/layout.css" rel="stylesheet" />
</head>

<body>
  <style>
    body {
      background: #008f7b;
    }

    #app {
      width: 95%;
      margin: 0 2.5%;
    }


    .form {
      width: 92%;
      margin: 2rem auto 0;
      padding-bottom: 6rem;
    }

    .van-popup--bottom {
      bottom: 0;
    }
  </style>
  <div id="app">
    <div class="edit-page">
      <a class="left-arrow" href="http://dc.it0733.com/dc/report.php">
        <van-icon name="arrow-left" size="1.8rem"></van-icon>报表
      </a>
      <h2>编辑菜单</h2>
      <div class="form">
        <template v-if="Logged !== true">
          <label for="">
            <span>手机号码</span>
            <input type="tel" v-model="tel" pattern="[0-9]*" oninput="value=value.replace(/[^\d.]/, '')"
              placeholder="请输入手机号">
          </label>
          <label for="" v-if="Logged !== true">
            <span>验证码</span>
            <input type="text" v-model="msgCode" pattern="[0-9]*" oninput="value=value.replace(/[^\d.]/, '')"
              placeholder="请输入短信验证码">
            <div class="code-btn" v-if="verifiedCode" @click="getCode()">获取验证码</div>
          </label>
          <van-button type="primary" round block class="check-btn" @click="checking()">点击验证</van-button>
        </template>
        <div class="edit">
          <template v-if="Logged == true">
            <h4>套餐</h4>
            <label for="">
              <span>大荤</span><input type="text" v-model="bigMeat">
            </label><label for="">
              <span>小荤</span><input type="text" v-model="smallMeat">
            </label><label for="">
              <span>素菜</span><input type="text" v-model="vegetable">
            </label><label for="">
              <span>主食</span><input type="text" v-model="stapleFood">
            </label>

            <h4>
              自选菜肴
            </h4>
            <div class="free" v-for="(item,index) in items">
              <span>菜肴{{index + 1}}</span>
              <input type="text" class="free-name" v-model="item.name">
              <span class="price">￥<input type="number" class="free-price" v-model="item.price" pattern="[0-9]*"
                  oninput="value=value.replace(/[^\d.]/, '')"></span>

              <div class="free-icon" v-if="index == 0">
                <van-icon name="add-o" color="#008f7b" @click="onAdd()" size="2rem" />
              </div>
              <div class="free-icon" v-else>
                <van-icon name="close" color="#ff5858" @click="onDel(index)" size="2rem" />
              </div>
            </div>
            <p class="top-day">
              <van-button class="day-btn" @click="dateShow()">当前菜单:{{today}} </van-button>
              <van-button @click="submit()">提交修改</van-button>
            </p>
            <van-button class="clone-btn" plain color="#f7502b" @click="copyShow()">点击克隆历史菜单</van-button>
          </template>
        </div>
      </div>
      <van-popup v-model="showDate" position="bottom">
        <van-datetime-picker v-model="editDate" type="date" title="选择要编辑的日期" :min-date="minDate" @confirm="editDay()"
          @cancel="dateShow()" />
      </van-popup>
      <van-popup v-model="showCopy" position="bottom">
        <van-datetime-picker v-model="copyDate" type="date" title="选择要复制的日期" :max-date="maxDate" @confirm="copyDay()"
          @cancel="copyShow()" />
      </van-popup>
    </div>
  </div>
  </div>
  <script>
    var app = new Vue({
      el: '#app',
      data() {
        return {
          verified: true,  //是否未验证过手机号
          verifiedCode: true, //获取验证码按钮
          Logged: true,  //登录状态
          tel: '',
          msgCode: '',
          bigMeat: '',   //大荤
          smallMeat: '', //小荤
          vegetable: '', //素菜
          stapleFood: '',//主食
          items: [{ name: '', price: '' }], //自选
          showDate: false, //显示日期选择框
          showCopy: false,//显示历史日期选择框
          minDate: new Date(), //要编辑的日期最小为今天
          maxDate: new Date(), //要复制的日期最大为今天
          editDate: new Date(), //已选要编辑的日期
          copyDate: new Date(), //已选要复制的日期
          today: ''  //当前要编辑的日期
        };
      },
      mounted() {
        var self = this;
        var date = new Date()
        var y = date.getFullYear()
        var m = date.getMonth() + 1
        var d = date.getDate()
        self.today = y + '-' + m + '-' + d

        $.getJSON('/http/get_caipu.php?jiucan_date=' + self.today, function (data) {
          this.bigMeat = data.bigMeat;
          this.smallMeat = data.smallMeat;
          this.vegetable = data.vegetable;
          this.stapleFood = data.stapleFood;
          if (data.items.length !== 0) {
            this.items = data.items;
          } else {
            this.items = [{ name: '', price: '' }]
          }
        }.bind(this));
      },
      methods: {
        onAdd() {
          this.items.push({})
        },
        onDel(index) {
          this.items.splice(index, 1)
        },
        //提交修改
        submit() {
          var date = this.editDate
          var y = date.getFullYear()
          var m = date.getMonth() + 1
          var d = date.getDate()
          var day = y + '-' + m + '-' + d
          this.$dialog.confirm({
            title: '确定将菜单保存到' + day + '日吗？',
          })
            .then(() => {
              $.ajax({
                type: "POST",
                url: "/http/set_caipu.php?act=save",
                data: {
                  jiucan_date: day,
                  bigMeat: this.bigMeat,
                  smallMeat: this.smallMeat,
                  vegetable: this.vegetable,
                  stapleFood: this.stapleFood,
                  items: this.items
                },
                success: (r) => {
                  console.log(r);
                  this.$toast.success('修改成功')
                },
                error: (error) => {
                  this.$toast.fail('提交失败');
                  console.log(error);
                }
              })
            })
            .catch(() => {
              // on cancel
            });
        },
        dateShow() {
          this.showDate = !this.showDate;
        },
        copyShow() {
          this.showCopy = !this.showCopy;
        },
        editDay() {
          var date = this.editDate
          var y = date.getFullYear()
          var m = date.getMonth() + 1
          var d = date.getDate()
          this.today = y + '-' + m + '-' + d
          this.showDate = !this.showDate;
        },
        //选择复制日期
        copyDay() {
          var date = this.copyDate
          var y = date.getFullYear()
          var m = date.getMonth() + 1
          var d = date.getDate()
          var day = y + '-' + m + '-' + d

          $.getJSON('/http/get_caipu.php?jiucan_date=' + day, function (data) {
            this.bigMeat = data.bigMeat;
            this.smallMeat = data.smallMeat;
            this.vegetable = data.vegetable;
            this.stapleFood = data.stapleFood;

            if (data.items.length !== 0) {
              this.items = data.items;
            } else {
              this.items = [{ name: '', price: '' }]
            }
          }.bind(this));

          this.showCopy = !this.showCopy;
        },
        //获取验证码
        getCode() {
          if (this.tel == '') {
            this.$toast.fail('请填写手机号码');
            return false
          }
          $.ajax({
            type: 'post',
            url: '?act=getcode&tel=' + this.tel + "&r=" + Math.random(),
            success: (r) => {
              if (r == "手机号未被授权！") {
                this.$toast.fail(r);
              } else {
                this.showForm(r)
              }
            }
          });
        },
        checking() {
          if (this.tel == '') {
            this.$toast.fail('请填写手机号码');
            return false
          }
          if (this.msgCode == '') {
            this.$toast.fail('请填写验证码');
            return false
          }
          $.ajax({
            type: "POST",
            url: "?act=save",
            data: {
              tel: this.tel,
              code: this.msgCode,
            },
            success: (r) => {
              console.log(r);
              if (r.indexOf("验证码错误") != -1) {
                this.$toast.fail('验证码错误！');
              } else {
                //验证通过
                this.Logged = true
              }
            },
            error: (error) => {
              this.$toast.fail('提交失败');
              console.log(error);
            }
          })
        },
      }
    })
  </script>
</body>

</html>